<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<meta http-equiv="X-UA-Compatible" content="IE=edge" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
		<title>首页登录</title>
		<link rel="stylesheet" href="./layui/css/layui.css">
		<style>
			* {
			  user-select: none;
			  /* 无法选中,整体感更强 */
			}
			body {
			  background-image: url(./img/bj2.png);
			  background-repeat: no-repeat;
			  background-size: cover;
			  background-attachment: fixed;
			}
			.login {
			  position: absolute;
			  top: 50%;
			  margin-top: -200px;
			  left: 50%;
			  /* form表单width:400px 这里回200px */
			  margin-left: -200px;
			  /* transform: translate(-50%,-50%); */
			  width: 400px;
			  height: 400px;
			  border-radius: 25px;
			  background-color: #00000098;
			  text-align: center;
			  padding: 5px 40px;
			  box-sizing: border-box;
			  box-shadow: 5px 10px 5px #161616a8;
			}
			
			.login h1 {
			  font-family: "微软雅黑";
			  color: white;
			}
			
			input {
			  background-color: rgba(255, 255, 255, 0);
			  width: 80%;
			  height: 48px;
			  margin-bottom: 10px;
			  border: 0px;
			  border-bottom: 2px solid silver;
			  outline: none;
			  font-size: 22px;
			  color: white;
			}
			form img {
			  width: 32px;
			  position: relative;
			  top: 5px;
			}
			.btn {
			  width: 40%;
			  background-image: linear-gradient(120deg, #f6d365 0%, #fda085 100%);
			  border-radius: 25px;
			}
			
			.btn:hover {
			  background-image: linear-gradient(to right, #fa709a 0%, #fee140 100%);
			}
		</style>
	</head>
	<body>
		 <div class=".bigbox">
		      <form action="" class="login">
		        <h1>login</h1>
		        <!-- <img src="img/user.png" alt=""> -->
		        <input type="text" placeholder="用户名" required />
		        <!-- <img src="img/lock.png" alt=""> -->
		        <input type="password" placeholder="密码" required />
		        <input type="submit" class="btn" value="登录" />
		      </form>
		    </div>
			
			<script src="layui/layui.js"></script>
	</body>
</html>